<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <div class="card-box">
          <p class="header-title">小按钮：使用size="sm"类于a、button或input元素上的按钮类</p>
          <div>
            <j-button class="btnstyle" status="primary" size="sm">Primary</j-button>
            <j-button class="btnstyle" status="secondary" size="sm">Secondary</j-button>
            <j-button class="btnstyle" status="success" size="sm">Success</j-button>
            <j-button class="btnstyle" status="danger" size="sm">Danger</j-button>
            <j-button class="btnstyle" status="dark" size="sm">Dark</j-button>
            <j-button class="btnstyle" status="warning" size="sm">Warning</j-button>
            <j-button class="btnstyle" status="info" size="sm">Info</j-button>
            <j-button class="btnstyle" status="light" size="sm">Light</j-button>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card-box">
          <p class="header-title">增加btn-rounded类名于元素上即可出现圆角按钮</p>
          <div>
            <j-button class="btnstyle btn-rounded" status="primary" size="sm">Primary</j-button>
            <j-button class="btnstyle btn-rounded" status="secondary" size="sm">Secondary</j-button>
            <j-button class="btnstyle btn-rounded" status="success" size="sm">Success</j-button>
            <j-button class="btnstyle btn-rounded" status="danger" size="sm">Danger</j-button>
            <j-button class="btnstyle btn-rounded" status="dark" size="sm">Dark</j-button>
            <j-button class="btnstyle btn-rounded" status="warning" size="sm">Warning</j-button>
            <j-button class="btnstyle btn-rounded" status="info" size="sm">Info</j-button>
            <j-button class="btnstyle btn-rounded" status="light" size="sm">Light</j-button>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <div class="card-box">
          <j-button class="btnstyle" status="outline-primary" size="sm">Primary</j-button>
          <j-button class="btnstyle" status="outline-secondary" size="sm">Secondary</j-button>
          <j-button class="btnstyle" status="outline-success" size="sm">Success</j-button>
          <j-button class="btnstyle" status="outline-danger" size="sm">Danger</j-button>
          <j-button class="btnstyle" status="outline-dark" size="sm">Dark</j-button>
          <j-button class="btnstyle" status="outline-warning" size="sm">Warning</j-button>
          <j-button class="btnstyle" status="outline-info" size="sm">Info</j-button>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card-box">
          <j-button class="btnstyle btn-rounded" status="outline-primary" size="sm">Primary</j-button>
          <j-button class="btnstyle btn-rounded" status="outline-secondary" size="sm">Secondary</j-button>
          <j-button class="btnstyle btn-rounded" status="outline-success" size="sm">Success</j-button>
          <j-button class="btnstyle btn-rounded" status="outline-danger" size="sm">Danger</j-button>
          <j-button class="btnstyle btn-rounded" status="outline-dark" size="sm">Dark</j-button>
          <j-button class="btnstyle btn-rounded" status="outline-warning" size="sm">Warning</j-button>
          <j-button class="btnstyle btn-rounded" status="outline-info" size="sm">Info</j-button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        <div class="card-box">
          <p class="header-title">按钮尺寸：size增加 sm,lg或不赋值获取更多尺寸</p>
          <j-button class="btnstyle" status="primary" size="sm">Primary</j-button>
          <j-button class="btnstyle" status="success">Success</j-button>
          <j-button class="btnstyle" status="danger" size="lg">Danger</j-button>
        </div>
        <div class="card-box">
          <p class="header-title">Button-Disabled</p>
          <j-button class="btnstyle" disabled status="primary" size="sm">Primary</j-button>
          <j-button class="btnstyle" disabled status="success">Success</j-button>
          <j-button class="btnstyle" disabled status="danger" size="lg">Danger</j-button>
        </div>
      </div>
      <div class="col-md-4 button-margin">
        <div class="card-box">
          <p class="header-title">Icon 按钮</p>
          <j-button status="primary" size="sm">
            <i class="fa fa-times" aria-hidden="true"></i>
          </j-button>
          <j-button status="danger" size="sm">
            <i class="fa fa-sun-o" aria-hidden="true"></i>
          </j-button>
          <j-button status="secondary" size="sm">
            <i class="fa fa-cog" aria-hidden="true"></i>
          </j-button>
          <j-button status="primary" size="sm">
            <i class="fa fa-outdent" aria-hidden="true"></i>
          </j-button>
          <j-button status="primary" size="sm">
            <i class="fa fa-indent" aria-hidden="true"></i>
          </j-button>
          <j-button status="dark" size="sm">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
          </j-button>
          <j-button status="info" size="sm">
            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
          </j-button>
          <j-button status="warning" size="sm">
            <i class="fa fa-table" aria-hidden="true"></i>
          </j-button>
          <j-button status="warning" size="sm">
            <i class="fa fa-list" aria-hidden="true"></i>
          </j-button>
        </div>
        <div class="card-box">
          <p class="header-title">Block Button:增加类名.btn-block</p>
          <j-button class="btn-block" status="success">Success</j-button>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card-box">
          <div class="btn-group mb-2">
                <j-button status="light">1</j-button>
                <j-button status="light">2</j-button>
                <j-button status="light">3</j-button>
                <j-button status="light">4</j-button>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import jButton from "@/components/Button";
export default {
  components: {
    jButton
  }
};
</script>

<style lang='less' scoped>
.btnstyle {
  margin-bottom: 12px;
  margin-left: 8px;
  width: 110px;
}
.button-margin button {
  margin-bottom: 12px;
  margin-left: 8px;
}
//Card Box
.card-box {
  padding: 20px;
  border-radius: 3px;
  margin-bottom: 30px;
  background-color: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);

  .header-title {
    margin-bottom: 8px;
    font-size: 14px;
    margin-top: 0;
    color: #767676;
  }
}
</style>

